<template>
  <div class="cart">
    <header-view title="购物车" :edit="true"></header-view>
    <!-- <div class="content"> -->
    <cart-detail v-if="isShow" :changeShow="changeShow"></cart-detail>
    <empty-view v-else></empty-view>
    <!-- </div> -->
    <footer-view></footer-view>
  </div>
</template>
<script>
import HeaderView from "@/components/HeaderView.vue";
import EmptyView from "@/components/EmptyView.vue";
import FooterView from "@/components/FooterView.vue";
import CartDetail from "./components/CartDetail.vue";
import { useStore } from "vuex";
import { onMounted, ref } from "vue";

export default {
  name: "CartView",
  components: {
    FooterView,
    EmptyView,
    HeaderView,
    CartDetail,
  },
  setup() {
    let isShow = ref(true);
    const store = useStore();

    const init = () => {
      if (store.state.cartList.length === 0) {
        isShow.value = false;
      }
    };
    const changeShow = () => {
      isShow.value = false;
    };
    onMounted(() => {
      init();
    });
    return {
      isShow,
      changeShow,
    };
  },
};
</script>
<style lang="scss" scoped>
.cart {
  display: flex;
  flex-flow: column;
  height: 100%;
}
</style>
